<template>
	<view>
		<view class="top">
			<view class="padding grids margin-tb">
				<view class="cu-list grid col-3 no-border">
					<view class="cu-item">
						<view>团队总人数</view>
						<view class="text-bold text-xxl margin-top-sm">{{count.team_total}}</view>
					</view>
					<view class="cu-item">
						<view>今日新增</view>
						<view class="text-bold text-xxl margin-top-sm">{{count.today_incr}}</view>
					</view>
					<view class="cu-item">
						<view>组长总人数</view>
						<view class="text-bold text-xxl margin-top-sm">{{count.level3_count}}</view>
					</view>
					<view class="cu-item">
						<view>经理总人数</view>
						<view class="text-bold text-xxl margin-top-sm">{{count.level4_count}}</view>
					</view>
					<view class="cu-item">
						<view>总监总人数</view>
						<view class="text-bold text-xxl margin-top-sm">{{count.level5_count}}</view>
					</view>
					<view class="cu-item">
						<view>总经理总人数</view>
						<view class="text-bold text-xxl margin-top-sm">{{count.level6_count}}</view>
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="0==TabCur?'active cur':''" @tap="tabSelect" data-id="0">
					直属 （{{0==TabCur ? filterList0.length : list0.length}} 人）
					<image class="icon" src="../../static/images/tmicon.png" :class="{ open: modalName }"></image>
				</view>

				<view class="cu-item flex-sub" :class="1==TabCur?'active cur':''" @tap="tabSelect" data-id="1">
					团队 （{{1==TabCur ? filterList1.length : list1.length}} 人）
					<image class="icon" src="../../static/images/tmicon.png" :class="{ open: modalName }"></image>
				</view>
			</view>
		</scroll-view>

		<!-- 筛选 -->
		<view class="drop-list" v-show="modalName=='Modal'">
			<view class="item" v-for="i in dropList" :key="i.id" @click="cgFilter(i.text)">{{i.text}}</view>
		</view>

		<view class="padding-bottom-sm blank"></view>

		<view class="list bg-white" v-show="TabCur==0">
			<my-tab-item v-for="i in filterList0" :key="i.id" :img="i.full_picture" :title="i.nickname" :info="'推荐人：' + ((i.parent == null)?'无':i.parent.nickname)"
			 :date="i.created_at" type="team" :level="i.levels.level_name"></my-tab-item>
		</view>

		<view class="list bg-white" v-show="TabCur==1">
			<my-tab-item v-for="i in filterList1" :key="i.id" :img="i.full_picture" :title="i.nickname" :info="'推荐人：' + ((i.parent == null)?'无':i.parent.nickname)"
			 :date="i.created_at" type="team" :level="i.levels.level_name"></my-tab-item>
		</view>

		<view class="cu-modal" :class="modalName=='Modal'?'show':''" @tap="hideModal">

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				modalName: null,
				count: [],
				list0: [],
				list1: [],
				filter: '',
				tabs: [{
						id: 0,
						text: '直属'
					},
					{
						id: 1,
						text: '团队'
					}
				],
				dropList: [{
						id: 1,
						text: '普通用户'
					},
					{
						id: 2,
						text: 'VIP'
					},
					{
						id: 3,
						text: '组长'
					},
					{
						id: 4,
						text: '经理'
					},
					{
						id: 5,
						text: '总监'
					},
					{
						id: 6,
						text: '总经理'
					}
				]
			}
		},
		computed: {
			filterList0() {
				if (this.filter) {
					return this.list0.filter(item => item.levels.level_name == this.filter)
				} else {
					return this.list0
				}
			},
			filterList1() {
				if (this.filter) {
					return this.list1.filter(item => item.levels.level_name == this.filter)
				} else {
					return this.list1
				}
			}
		},
		onLoad() {
			this.getCount();
			this.getList();
		},
		methods: {
			tabSelect(e) {
				if (this.TabCur == e.currentTarget.dataset.id) {
					if (this.modalName) {
						this.modalName = ''
					} else {
						this.modalName = 'Modal'
					}
				} else {
					this.filter = ''
				}
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			getCount() {
				this.$u.get('/team/count').then(res => {
					this.count = res.data.result
				})
			},
			getList() {
				this.$u.get('/team/list').then(res => {
					this.list0 = res.data.result.user
					this.list1 = res.data.result.team
				})
			},
			cgFilter(text) {
				console.log(text)
				this.filter = text
				this.modalName = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-modal {
		z-index: 100;
	}

	.top {
		height: 480rpx;
		position: relative;
		z-index: 111;
		background: #1f1f1f;
		display: flex;
		flex-flow: column;
		justify-content: space-between;

		.cu-list.grid {
			background-color: transparent;
			color: #E4CB9B;
		}
	}

	.cu-list.grid>.cu-item {
		position: relative;
	}

	.cu-list.grid>.cu-item::after {
		content: '';
		width: 2rpx;
		height: 60rpx;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		background-color: #E4CB9B;
		position: absolute;
	}

	.cu-list.grid>.cu-item:nth-child(1)::after,
	.cu-list.grid>.cu-item:nth-child(4)::after {
		display: none;
	}

	.nav {
		color: gray;
		position: sticky;
		z-index: 111;
		top: 0;

		.icon {
			width: 20rpx;
			height: 20rpx;
		}

		.active {
			color: #1f1f1f;
			font-weight: bold;

			.open {
				transform: rotate(90deg);
			}
		}
	}

	.drop-list {
		width: 100%;
		position: absolute;
		z-index: 111;

		.item {
			padding: 20rpx 30rpx;
			background-color: white;
			color: #666666;
			text-align: center;
			font-size: 32rpx;
			letter-spacing: 2rpx;
		}
	}
</style>
